<template>
  <el-dialog title="选择设备" :close-on-click-modal="false" :visible.sync="visible" width="66%">
    <div>
      <el-row type="flex" :gutter="10" class="row-bg">
        <el-col :span="5">
          <div style="margin-top: 15px">
            <!-- <i style="color: #00a65a" class="el-icon-plus" @click="() => addRoot()"></i> -->
            <el-tree ref="tree" :props="props1" :data="data" node-key="id" :expand-on-click-node="false" @node-click="select">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span style="display: inline-block;padding-right: 30px">
                  <icon-svg name="fileopen"></icon-svg>
                  &nbsp;
                  <span v-if="node.data.select" style="color: red">{{ node.label }}</span>
                  <span v-if="!node.data.select">{{ node.label }}</span>
                </span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="mod-config">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-col :span="6">
                <el-form-item><el-input size="mini" v-model="dataForm.key" placeholder="名称" clearable @change="getDataList()"></el-input></el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item><el-input size="mini" v-model="dataForm.mac" placeholder="MAC" clearable @change="getDataList()"></el-input></el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item><el-input size="mini" v-model="dataForm.width" placeholder="宽度" clearable @change="getDataList()"></el-input></el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item><el-input size="mini" v-model="dataForm.height" placeholder="高度" clearable @change="getDataList()"></el-input></el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item><el-button size="mini" @click="getDataList()">查询</el-button></el-form-item>
              </el-col>
            </el-form>

            <el-table
              size="mini"
              :data="dataList"
              height="280"
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;"
              row-key="id"
              ref="multipleTable"
            >
              <el-table-column type="selection" header-align="center" align="center" reserve-selection width="30"></el-table-column>
              <el-table-column prop="id" header-align="center" align="center" label="ID" width="40"></el-table-column>
              <el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
              <el-table-column prop="mac" header-align="center" align="center" label="MAC"></el-table-column>
              <el-table-column prop="onlineStatus" header-align="center" align="center" label="在线">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.onlineStatus === 0" type="info" size="medium">否</el-tag>
                  <el-tag v-if="scope.row.onlineStatus === 1" type="warning" size="medium">是</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="width" header-align="center" align="center" label="分辨率">
                <template slot-scope="scope">
                  {{ scope.row.width }} * {{ scope.row.height }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              small
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, prev, pager, next"
            ></el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
          </div>
        </el-col>
        <el-col :span="1">
          <div style="margin-top: 160px"><!--<el-button  icon="el-icon-d-arrow-right" @click="addDevice" size="mini"  circle></el-button>--></div>
        </el-col>
        <el-col :span="3">
          <el-table size="mini" :data="dataListSelections" height="280" @selection-change="selectionChangeHandle" style="width: 100%;margin-top: 60px">
            <el-table-column prop="name" header-align="center" align="center" label="已选设备"></el-table-column>
          </el-table>
          <div style="margin-top: 10px;margin-left: 15px;"><el-button type="primary" size="small" @click="submit()">完成选择</el-button></div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<style scoped>
.el-dialog__body {
  padding: 10px !important;
}

.el-button.is-circle {
  padding: 7px !important;
}
</style>
<script>
import AddOrUpdate from './stb-add-or-update';
export default {
  data: function() {
    return {
      dataForm: {
        key: '',
        mac: '',
        switchStatus: '',
        height: '',
        width: ''
      },
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '禁用'
        },
        {
          value: '1',
          label: '启用'
        }
      ],
      props1: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      data: [],
      showAddGroup: false,
      showEditGroup: false,
      editName: false,
      curNode: {},
      selectedNode: {},
      pNode: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      visible: false,
      selectedDevice: [],
      refresh: false
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList();
  },
  mounted() {
    this.getGroups();
  },
  methods: {
    // 获取数据列表
    getDataList: function() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/generator/stb/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.dataForm.key,
          mac: this.dataForm.mac,
          switchStatus: this.dataForm.switchStatus,
          stb_group_id: this.selectedNode.data ? this.selectedNode.data.id : null,
          height: this.dataForm.height,
          width: this.dataForm.width
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        if (this.dataListSelections.length > 0) {
          this.refresh = true;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      console.log(val);
      this.dataListSelections = val;
      // if (this.refresh && val.length === 0) {
      //   return
      // }
      // this.refresh = false
      // this.removeItems(this.dataList)
      // this.addDevice()
    },
    getGroups() {
      const self = this;
      const url = '/generator/sgroup/goupList';
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          self.data = data.data;
        } else {
          // alert(data.msg)
          this.$message({
            type: 'error',
            message: data.msg
          });
        }
      });
    },
    getRoot(node) {
      if (node.data.parentId === 0) {
        return node.data.id;
      } else {
        return this.getRoot(this.$refs.tree.getNode(node.data.parentId));
      }
    },
    reload: function(event) {
      this.getDataList();
    },
    select(data, node, ele) {
      if (this.selectedNode.data) {
        // console.log(this.selectedNode)
        this.selectedNode.data.select = false;
        this.selectedNode.data.name = ' ' + this.selectedNode.data.name;
        this.selectedNode.data.name = this.selectedNode.data.name.trim();
      }
      data.select = true;
      data.name = ' ' + node.data.name;
      this.selectedNode = node;
      this.getDataList();
    },
    init: function(data) {
      this.visible = true;
      this.dataListSelections = data;
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
        data.forEach(row => {
          console.log('row', row);
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      });
    },
    submit() {
      this.$emit('done', this.dataListSelections);
      this.visible = false;
    }
  }
};
</script>
